<template>
<swiper :options="swiperOption">
        <swiper-slide v-for="slide in swiperSlides" :key="slide.id" class="liimg"><img :src="slide.src">
        </swiper-slide>
        <p class="swiper-pagination" slot="pagination"></p></swiper>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data () {    return {
      swiperOption: {
        autoplay:true,//自动切换
        pagination: {
          el: '.swiper-pagination'//分页器
        }
      },
      swiperSlides: [{id:1,src:require("../../public/image/1.jpg")}, {id:2,src:require("../../public/image/2.jpg")},{id:3,src:require("../../public/image/3.jpg")},{id:4,src:require("../../public/image/4.jpg")}]
    }
  },
  components:{
    swiper,
    swiperSlide
  }
}
</script>
<style lang="less">
    .liimg{
        width: 375px;
        height: 140px;
        display: flex;
        justify-content: center;
        background-color: #C82519;
        border-radius: 0 0 50% 50%;
        img{
        width: 350px;
        height: 140px;
        border-radius: 10px;
        }
    }
    
</style>